import { style } from 'dom-helpers';
import {useState} from 'react';
import FilterFooter from '../../../../components/FilterFooter';
import styles from './index.module.css'

const FilterMore=(props)=>{
    const {data:{roomType,oriented,floor,characteristic},type,onSave,defaultValue,onCancel}=props
    const [selectedValues,setSelected]=useState(defaultValue)

    // 点击每个tag的方法
    const onTagClick=(value)=>{
        const newSelectedValues=[...selectedValues]
        const idx=newSelectedValues.indexOf(value)
        if(idx<0){
            newSelectedValues.push(value)
        }else{
            // 如果有就取消高亮状态
            newSelectedValues.splice(idx,1)
        }

        setSelected([...newSelectedValues])
    }

    const renderFilters=(data)=>{
        return data.map(item=>{
            const isSelected = selectedValues.indexOf(item.value) > -1
            return(
                <span key={item.value} 
                className={[styles.tag,isSelected ? styles.tagActive:''].join(' ')}
                onClick={()=>onTagClick(item.value)}
                >{item.label}</span>
            )        
        })
    }
    // 取消按钮的事件处理方法
    const onClear=()=>{
        setSelected([])
    }

    // 确定按钮的事件处理方法
    const onOk=()=>{
        // 父组件中的方法
        onSave(type,selectedValues)
    }


    return(
        <div className={styles.root}>
            {/* 遮罩层 */}
            <div className={styles.mask} onClick={()=>{onCancel(type)}}></div>

            {/* 条件内容 */}
            <div className={styles.tags}>
                <dl className={styles.dl}>
                    <dt className={styles.dt}>户型</dt>
                    <dd className={styles.dd}>{renderFilters(roomType)}</dd>

                    <dt className={styles.dt}>朝向</dt>
                    <dd className={styles.dd}>{renderFilters(oriented)}</dd>

                    <dt className={styles.dt}>楼层</dt>
                    <dd className={styles.dd}>{renderFilters(floor)}</dd>

                    <dt className={styles.dt}>房屋点亮</dt>
                    <dd className={styles.dd}>{renderFilters(characteristic)}</dd>
                </dl>
            </div>
            {/* 底部按钮 */}
            <FilterFooter className={styles.footer} cancelText='清除' onText='确定'
            onCancel={onClear}
            onOk={onOk}
            />
        </div>
    )
}

export default FilterMore